// 歌曲列表组件
<template>
    <ul class="songlist" :style="{paddingLeft:shownumber?'40px':'10px'}">
        <li v-for="(song,index) in songlist" :key="song.id">
            <em v-if="shownumber" :class="{active:index<3}">{{(index &lt; 9)?"0"+(index+1):(index+1)}}</em>
            <div class="left">
                <h5 v-html="$options.filters.highLight(song.name,keyword)"></h5>
                <div>
                    <i v-if="song.song.privilege.maxbr>320000"></i>
                    <span v-for="art in song.song.artists" :key="art.id" >
                        <span v-html="$options.filters.highLight(art.name,keyword)"></span>
                    </span>
                    -{{song.song.album.name}}
                </div>
            </div>
            <div class="right-btn" @click="playme(song)"></div>
        </li>
    </ul>
</template>
<script>
export default {
    props:{
        // 传值
        songlist:Array,
        keyword:{
            type:String,
            default:""
        },
        shownumber:{
            type:Boolean,
            default:false
        }
    },
    methods:{
        playme(song){
            this.$emit("play",song)
        }
    },
    created(){
        console.log("当前组件实例对象==>",this);
    },
    filters:{
        // 变红色
        highLight(value,keyword){
            let reg=new RegExp(keyword,'gi');
            return  value.replace(reg,`<span style="color:red;">${keyword}</span>`);
        }
    }
}
</script>
<style lang="less" scoped>
.songlist{
    padding-left:10px;
    padding-top:3px;
    li{
        display: flex;
        margin-top:7px;
        align-items: center;
        padding-right:10px;
        border-bottom: 1px solid #eee;
        position: relative;
        em{
            color:#888;
            left:-30px;
            position: absolute;
            &.active{
                color:#dd001b;
            }
        }
        .left{
            flex:1;
            overflow: hidden; 
            &>h5{
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            &>div{
                font-size:12px;
                color:#888;
                margin:7px 0px;
                i{
                     display: inline-block;
                     width:17px;
                     height:8px;
                     background:url("../assets/index_icon_2x.png") no-repeat;
                     background-size: 166px 97px;
                }
            }
        }
        .right-btn{
            width:22px;
            height:22px;
            background:url("../assets/index_icon_2x.png") no-repeat;
            background-size: 166px 97px;
            background-position:-24px 0px;
        }
    }
}
</style>